<template>
  <div class="z-count">
    <div
      class="z-count--item"
      v-for="(item, index) in items"
      :key="index"
      :style="{
        '--z-icon-color': item.iconColor,
        '--z-icon-bg-color': item.iconBgColor
      }"
    >
      <div class="z-count--icon" v-if="item.icon">
        <svg-icon :name="item.icon"></svg-icon>
      </div>

      <div class="z-count--info">
        <div class="z-count--label">
          <span class="z-count--name">{{
            typeof item.name === 'function' ? item.name() : $t(item.name)
          }}</span>
          <span class="z-count--note">{{ item.note }}</span>
        </div>
        <div class="z-count--innter">
          <div class="z-count--value">{{ numConverter(item.value) }}</div>
          <div class="z-count--unit">
            {{ typeof item.unit === 'function' ? item.unit() : item.unit }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { numConverter } from '@/utils/count'
import { useI18n } from 'vue-i18n'
import type { Props } from './type'

defineOptions({
  name: 'z-count'
})

const props = defineProps<Props>()
const { t } = useI18n()
const $t = (text: string = '') => {
  return props.i18n && text ? t((props.i18nPrefix ? props.i18nPrefix + '.' : '') + text) : text
}

const items = computed(() => {
  return props.list?.length
    ? props.list
    : [
        {
          name: props.name,
          note: props.note,
          icon: props.icon,
          unit: props.unit,
          value: props.value,
          iconColor: props.iconColor,
          iconBgColor: props.iconBgColor
        }
      ]
})
</script>

<style lang="scss">
@use './style.scss';
</style>
